import { SearchOutlined } from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import FourGrid from '../../components/FourGrid'
import Inputs from '../../components/Inputs'
import { getToken, supabase } from '../../utils'
import './index.scss'
export default function Search() {
  const [sea,_]=useSearchParams()
  const search=sea.get('search')

  const [loading,setloading]=useState(false)
  const [searchtext,setsearchtext]=useState(search)
  const [searchdata,setsearchdata]=useState([])
  function onchange(e){
    // console.log(e)
    setsearchtext(e)
  }
  async function onsubmit(e){
    // console.log(e)
    const { data, error } = await supabase
      .from('AllData')
      .select('*')
      // console.log(data)
    const reg=new RegExp(searchtext)
    // console.log(reg)
    const a=data.filter(item=>
        reg.test(item.text)
      
    )
    setsearchdata(a)
    // console.log(a)
  }
  async function recordHistory(id){
    // 这里可以给一个节流，用户如果点击后立马关闭(点错了)就不发送请求了
    // const user=JSON.parse(getToken('user'))
    //   const {data,err}=await supabase
    //   .from('user')
    //   .update({...userData,history:`${id},${dayjs().format('MM-DD HH:mm')}/${userData.history?userData.history:''}`})
    //   .match({username:user.username})
  }
  useEffect(()=>{
    onsubmit()
  },[])
  return (
    <div className='searchs'>
        <Inputs icon={<SearchOutlined />} defaultvalue={searchtext} onsubmit={onsubmit} onchange={onchange} text='搜索' loading={loading} placeholder='请输入内容'/>

      {
        searchdata.length?<div style={{marginTop:'2rem'}}>
        <FourGrid data={searchdata} recordHistory={recordHistory}/>
      </div>:<h1 style={{marginTop:'2rem'}}>您搜索的{searchtext}暂无数据，换个搜索内容吧</h1>
      }
      
    </div>
  )
}
